<template>
  <div>
    <el-input
      :value="ORG_NAME"
      readonly
      placeholder="部门">
      <i
        slot="suffix"
        class="el-input__icon el-icon-circle-plus"
        @click="openDia"/>
    </el-input>
    <el-input
      v-show="false"
      :value="organizationId"/>
    <el-dialog
      ref="dia"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      custom-class="r-dialog"
      title="部门"
      top="5vh"
      width="20%"
    >
      <el-tree
        ref="tree"
        :data="jsonTree"
        :default-expanded-keys="[10000]"
        style="margin-top: 12px;"
        node-key="id"
        highlight-current
        @node-click="nodeClickHandle"
      />

      <span v-if="isShowFoot" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmHandle(organization)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getJsonTree } from '@/utils/index'
import formMixins from '@/mixins/formMixins'
import { getOrgsTree } from '@/api/admin/org/employeeInfo'

export default {
  name: 'BrandOrgSelect',
  components: {
  },
  mixins: [formMixins],
  props: {
    value: [Object, String, Number],
    isShowFoot: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      search: {
      },
      organization: {
        id: '',
        text: ''
      },
      dialogFormVisible: false,
      key: '',
      tree: [],
      loading: false,
      ORG_NAME: ''
    }
  },
  computed: {
    jsonTree() {
      // eslint-disable-next-line no-return-assign
      this.tree.forEach(el => el.label = el.text)
      // eslint-disable-next-line no-return-assign
      this.tree.forEach(el => el.parentId = el.parent)
      return getJsonTree(this.tree)
    },
    // ORG_NAME: {
    //   get() {
    //     return this.value
    //   },
    //   set(val) {
    //     this.$emit('input', val)
    //   }
    // },
    organizationId: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value(val) {
      this.organizationId = val
    },
    organizationId(val) {
      this.$emit('input', val)
    }
  },
  mounted() {
  },
  methods: {
    // 获取功能树
    searchHandle() {
      this.loading = true
      getOrgsTree().then(res => {
        this.loading = false
        // res.data[0].title = '菜单';
        this.tree = res
      }).catch(err => {
        this.loading = false
      })
    },
    openDia() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.searchHandle()
      })
    },
    nodeClickHandle(data) {
      this.organization = {
        text: data.text,
        id: data.id
      }
    },

    confirmHandle(data) {
      this.dialogFormVisible = false
      this.organizationId = data.id
      this.ORG_NAME = data.text
    }
  }

}
</script>

<style scoped>

</style>
